<template>
  <div>
    <!--  主页导航栏-->
    <!--用户信息栏-->
    <van-sticky :offset-top="800" z-index="100">

      <div class="main-container" >
            <div class="" style="text-align: center">
              去 <span style="font-size: 15px;font-weight: 800;text-align: center">{{endaddress}}</span><br>
              <span style="font-size: 10px">全程 <span style="color: #409EFF">{{driverLong}}</span>公里 约<span style="color: #409EFF">{{driverTime}}</span>分钟</span>

            </div>
      </div>
    </van-sticky>

    <van-sticky :offset-top="880" z-index="100">
      <div class="custom-layout">
        <div class="custom-item"  style="background-color: cornflowerblue;width:100%">
          <span style="line-height: 30px; color: white;" @click="arriveAtDestination">>>>>到达目的地</span>
        </div>
      </div>
    </van-sticky>
    <div id="showMap"  style="margin-top: -160px;z-index: 1"></div>

  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import StartIcon from "@/assets/导航起点.png"
import {getOrderById} from "@/components/api/homepage/homePage";



export default {
  data() {
    return {
      showSpan1:true,
      orderItem:{},
      map: null,
      userPhone: "",
      driverTime: null,
      driverLong: null,
      startaddress:"",
      endaddress:"",
      driverAddress:"",
      // 开始的经纬度
      startLatitudeAndLongitude: "",
      // 结束的经纬度
      endLatitudeAndLongitude: "",
    };
  },

  created() {
    if(this.$route.query.orderId){
      //   通过订单id去查找订单信息
      this.findOrder();
      this.initAMap();
    }
  },
  mounted() {

  },
  unmounted() {
    this.map.destroy();
  },


  methods: {
    arriveAtDestination(){
      this.$router.push({
        path: '/ArriveAtDestination',
        query: {
          orderId: this.orderItem.orderId,
          driverLong:this.driverLong
        }
      })
    },
    async findOrder(){
      getOrderById(this.$route.query.orderId).then(res=>{
        this.orderItem=res.order;
        this.startLatitudeAndLongitude=this.orderItem.startingPoint;
        this.endLatitudeAndLongitude=this.orderItem.destination;
      })
    },
    initAMap() {
      window._AMapSecurityConfig = {
        securityJsCode: this.$cod,
      };
      let self = this;

      AMapLoader.load({
        key: this.$key, // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale","AMap.Geocoder"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
          .then((AMap) => {
                var map = new AMap.Map("showMap", {
                  // 设置地图容器id
                  viewMode: "3D", // 是否为3D地图模式
                  zoom: 11, // 初始化地图级别
                  center: [116.397428, 39.90923],//地图显示中心点坐标
                });
                AMap.plugin(
                    ["AMap.ToolBar", "AMap.Driving", "AMap.Polyline", "AMap.Marker",'AMap.Geolocation'],
                    function() {
                      //异步同时加载多个插件
                      var icon = new AMap.Icon({
                        // 图标尺寸 ===> new AMap.Size(宽, 高)
                        size: new AMap.Size(80, 50),
                        // Icon图片
                        image: StartIcon,
                        // 根据所设置的大小拉伸或压缩图片 ===> new AMap.Size(宽, 高)
                        imageSize: new AMap.Size(50, 50)
                      });
                      // 逆地址
                      var geocoder = new AMap.Geocoder({
                        city: "", //城市设为北京，默认：“全国”
                      });
                      //添加点标记
                      var marker = new AMap.Marker({
                        // position:  [116.397428, 39.90923],
                        // 在这个里面需要设置偏移度,值应和图标的大小一致,如不设置,则会出现定位点随着地图缩略的变化而变化
                        offset: new AMap.Pixel(-50, -50),
                        icon
                      });
                      map.add(marker); //添加到地图
                      var toolbar = new AMap.ToolBar();
                      map.addControl(toolbar);
                      // var在函数作用外,否则无法调用

                      let startTranse = self.startLatitudeAndLongitude.split(",");
                      let endTranse = self.endLatitudeAndLongitude.split(",");
                      var driving = new AMap.Driving({
                        map: map,
                      }); //驾车路线规划
                      driving.search(
                          // 因地址值用2214.111的经纬度,所以需要格式转换
                          new AMap.LngLat(parseFloat(startTranse[0]), parseFloat(startTranse[1])),
                          new AMap.LngLat(parseFloat(endTranse[0]), parseFloat(endTranse[1])),
                          function(status, result) {
                            if (status === "complete") {
                              console.log("绘制驾车路线完成", result);
                              // 在这一块需要设置加时时间和大概的路程多少公里,用四舍五入的方式计算
                              self.driverTime = Math.round(result.routes[0].time / 60);
                              self.driverLong = Math.round(result.routes[0].distance / 1000);

                              // 逆地理编码获取地址信息
                              var start = self.startLatitudeAndLongitude.split(",");
                              var end = self.endLatitudeAndLongitude.split(",");
                              // 寻找开始地址的方法
                              geocoder.getAddress(start, function(status, result) {
                                if (status === 'complete' && result.regeocode) {
                                  console.log(result+"逆向")
                                  self.startaddress = result.regeocode.formattedAddress;
                                } else {
                                  console.log("获取开始地址失败");
                                }
                              });
                              // 寻找结束地址的方法
                              geocoder.getAddress(end, function(status, result) {
                                if (status === 'complete' && result.regeocode) {
                                  self.endaddress = result.regeocode.formattedAddress;
                                } else {
                                  console.log("获取结束地址失败");
                                }
                              });
                            } else {
                              console.log("获取驾车数据失败：" + result);
                            }
                          }
                      );
                    }
                );
              }
          )
    },
  },
};
</script>

<style scoped>

.icon {
  font-size: 50px; /* 设置图标尺寸 */
  display: flex;
  justify-content: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
  margin-top: 20px;
}

/* 可能需要为 <van-icon> 元素添加额外的样式 */
van-icon {
  width: 100%; /* 确保图标占据整个空间 */
  height: 100%; /* 确保图标占据整个空间 */
}

.radioBox{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: green ;
  margin-left: -20px;
}
.van-ellipsis111{
  margin-left: -50px;
}
.main-container {
  width: 70%;

  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background-color: white;
  border-radius: 10px;
  padding: 10px;
}

.sub-box {
  flex: 1;

}

.sub-box.middle {
  flex: 3;
}

.left-container {
  display: flex;
  justify-content: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
  flex-direction: column;

}

.right-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bold-text {
  font-weight: bold;
}
.custom-layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  padding: 10px;
}

.custom-item {
  width: 30%; /* 调整宽度 */
  padding: 5px; /* 调整内边距 */
  height: 30px;
  margin-left: 40px;
  margin-right: 40px;
  border-radius: 20px;
  background-color: lightblue;
}

.custom-item:nth-child(2) {
  background-color: lightgreen;
}

#showMap{
  width: 100%;
  height: 958px;
}
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: lightgray;
  padding: 10px;
}
.theOrderInderBoxFirst{
  background-color: white;
}
.theOrderInderBoxSecond{
  background-color: white;
}

.container1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left {
  background-color: lightblue;
  padding: 10px;
}

.right {
  padding: 10px;
}
</style>
